Awesome D3
This list keeps track of interesting
D3js libraries, plugins and utilities.
We decided not to list tutorials, resources or concepts here,
because there is already a
very good list of readings
out there you can check out and contribute to.
Curators: Moritz Klack and
Christopher Möller of
webkid.io
You can also explore the list with our interactive
D3 Discovery tool.
Charts
-
billboard.js -
Re-usable chart library [bar, line, area, donut, pie, step, spline]
-
britecharts -
Client-side reusable charting library [bar, line, donut, sparkline,
step]
-
chart-parts - A
flexible, React-friendly, Grammar of Graphics for data visualization
-
cirrusjs - A
multi-renderer charts library [area, line, stacked]
-
cubism - Time series
visualization
-
c3 - Reusable chart library
[line, spline, step, area, stacked, bar, pie, donut]
-
dagre-d3 - Layout
directed graphs on the client-side
-
dc.js - For heavy amounts
of data
-
dimple - An
object-oriented API for business analytics [bubble, area, stacked]
-
d2b - Chart library for axis,
pie, sankey, sunburst charts
-
d3.chart -
Framework for building reusable charts
-
d3.chart.sankey -
Reusable D3 Sankey diagram
- d3-bar - Bar chart
-
d3-beeswarm - Plugin
which computes a beeswarm arrangement
-
d3-boxplot - d3js box
plot plugin
-
d3-bumps-chart
- Plugin for visualizing bumps charts
-
d3-circle - Circle chart
[donut]
-
d3-dag - Layout
algorithms for visualizing directed acylic graphs
- d3-dot - Dot chart
-
d3-ez - Easy
Reusable D3 Charts & Components [bar, donut, pie, bubble, rose,
heatmap]
-
d3-flame-graph
- Flame graphs from hierarchical data
-
d3-funnel - A
funnel and pyramid chart library
-
d3-gridding - Chart
mockups using grids
-
d3-heatmap - Heatmap
-
d3-horizon-chart
- Horizon charts module
- d3-line - Line chart
-
d3-message-sequence
- A dynamic/static message sequence chart
-
d3-timeseries -
Time series charting library
-
d3-upset - Functions
for plotting an UpSet plot [upset, bar, intersections, venn,
relationships]
-
d3-x3d - Data
Driven 3D Charts with D3 and X3D [bubble, bar, surfacearea, scatterplot,
area]
-
d3fc - A collection of
interactive chart components [line, bar, stacked, scatter, candlestick,
ohlc]
-
d3plus -
Extension library for easy creation of visualizations [scatter, stacked,
line, bar, pie, network, bubble, box, map]
-
d3panels - Interactive
charts with linked brushing [dot, scatter, line, heatmap, histogram]
-
d3pie - A configurable
pie chart lib and generator
-
D3xter - Straight
forward plotting [plot, timeline, bar, histogram, pie]
-
D4 - Re-usable charts DSL
[bar, donut, line, scatter, stacked, waterfall]
-
dTree - Family tree
library
-
epoch - A general
purpose, real-time visualization library [area, bar, line, pie, scatter]
-
EventDrops - A time
based/event series interactive visualization
-
Fancycharts.js -
Library to visualize percentage values [bar, circles, donut]
-
firespray -
Streaming charts [bar, line, stacked]
-
forest-d3 - A time
series charting library [line, area, stacked, bar, scatter, pie ohlc]
-
Gantt-Chart - Gantt
chart library
-
insights - Library
to visualize and navigate graphs
-
kotojs - ES6 based
framework
-
metrics-graphics
- Optimized for visualizing time-series data [line, scatter, area]
-
micropolar - A
polar chart library
-
mpld3 - Export matplotlib
graphics to work in the Browser
-
neo4jd3 - Neo4j graph
visualization
-
nvd3 - Re-usable charts and
chart components [box plot, buttlet, candlestick, line, bar, pie,
scatter, sparkline]
-
oecd-simple-charts
- Simple charting library [box plot, stacked bar, pearl chart]
-
peek - Object-oriented
chart library [scatter, line, area, bar, pie, donut]
-
plotly.js - High
level charting library [scatter, line, bar, pie, box plot, histogram,
heatmap]
-
plottable -
Flexible, interactive charts for the web [area, bar, line, pie, scatter,
stacked]
-
radar-chart-d3
- Radar chart module
-
rickshaw -
Toolkit for creating interactive real-time graphs [line, scatter, bar]
-
taucharts -
Charts with a focus on design and flexibility [line, bar, area, stacked]
-
techan.js - A
visual, stock charting and technical analysis [candlestick, ohlc]
-
uvCharts - Supports
lots of different chart types [bar, area, pie, stacked, line, polar,
donut]
-
vega - A visualization
grammar
-
vega-lite - A high-level
grammar of interactive graphics
-
vega-lite-api - A
JavaScript API for Vega-Lite.
-
venn.js - Area
proportional Venn and Euler diagrams
-
visavail - Time data
availability visualization
-
vizabi - A framework for
building visual data exploration tools [bubble, map, line, bar, sankey,
donut]
-
WebCola - Layout for
graph visualization and exploration
-
xkcdgraphs - Xkcd
style graphs [line]
Third Party
-
angular-nvd3 - NVd3
for AngularJS [line, stacked, bar, area, scatter, bullet, donut]
-
d3act - d3 with React
[bar, bubble, pie]
-
d3-simpleCharts
- A d3 wordpress plugin
-
ember-charts -
Charts for Ember [line, bar, stacked, pie, scatter]
-
Layer Cake - A graphics
framework built on top of Svelte.
-
line-chart - Line
chart module for AngularJS [line, area, bar]
-
nivo - Dataviz components
for React with isomorphic ability [bar, line, area, bubble, chord,
heatmap]
-
ngx-charts - Chart
framework for Angular [bar, pie, line, area, polar, stacked, bubble]
-
potion - Collection
of React components for composing visualizations
-
react-d3 - Charts
for React [area, bar, candlestick, line, pie, scatter]
-
react-d3-components
- D3 Components [bar, stacked, scatter, line, area, pie]
-
react-d3-library
- Library to use D3 in React [area, bar, line, pie, scatter]
-
react-stockcharts
- Highly customizable stock charts [area, line, scatter, bubble, bar,
stacked, candlestick]
-
react-vis - A collection
of react components to render visualizations [area, bar, heatmap, line,
scatter]
-
reaviz - Data
visualization library for React based on D3
-
recharts -
Re-designed charting library built with React
-
semiotic - A data
visualization framework combining React & D3 [scatter, line, area]
-
victory -
Composable React components for building visualizations [area, bar,
candlestick, pie, line, scatter, voronoi]
-
vx - Visualization components
for React [bar, line, scatter, stacked, area, pattern, heatmap, pie,
radial, map, geo]
-
Vs - Declarative
visualisation components for Vue.js [bar, line, area, pie, donut,
stacked, sankey, timeline]
-
v-chart-plugin
- Easily bind a chart to the data stored in your Vue.js components.
Maps
-
d3-carto-map - A
mapping API that uses D3 geospatial functionality
-
d3-composite-projections
- Projections for showing countries’ distant lands together
-
datamaps -
Customizable map visualizations in one file
-
d3-topogram -
Continuous area cartograms based on TopoJSON
-
d3-exploder - Lets
you easily move and resize geographic features
-
d3-geo-polygon -
Clipping and geometric operations for spherical polygons
-
d3-geo-projection
- Extended geographic projections
-
d3-geo-scale-bar
- Displays automatic scale bars for projected geospatial data.
-
d3-geo-voronoi -
Voronoi diagrams and Delaunay triangulation for the sphere
-
d3-geomap - Library for
creating geographic maps
-
d3.geo2rect
- Morphing geojson polygons into rectangles
-
d3-inertia - An
extension to d3-drag that continues the mouse movement with some inertia
-
earthjs - Building
orthographic globe with SVG, Canvas & WebGL
-
mapmap.js - A
data-driven API for interactive thematic maps
-
mapsense.js - Full
resolution vector maps with D3
-
maptable
- Convert datasets to a set of visual components (Map, Filters, Table)
-
simple-map-d3 -
Easy choropleth style maps
-
spam - Create maps with
D3 and Canvas, easily
Third Party
-
leaflet-d3 -
Collection of plugins for using D3 with Leaflet [map, geo]
-
react-d3-basic
- Library For Building Composable And Declarative Maps [map, geo]
-
Wikimaps-D3js Atlas
- CLI to generate raster, topojson and svg maps [map, geo]
-
react-simple-maps
- An SVG mapping component library for React, built on top of d3-geo
[map, geo]
Utils
-
crossfilter -
Library for exploring large multivariate datasets
-
d3kit-timeline -
Timeline component that labels do not overlap
-
d3scription
- Tooltip with window edge collision detection
-
d3-annotation -
Annotation helper with built-in annotation types
-
d3-area-label - A
library for placing labels in areas
-
d3-breadcrumbs
- Simplifies breadcrumbs usage
-
d3-component -
Lightweight component abstraction
-
d3-extended - Extends
d3 with some common jQuery functions
-
d3-helpers - Little
utility functions
-
d3-history -
Proper URL bar history
-
d3-hsluv -
Human-friendly HSL (Hue, Saturation, Lightness) color space.
-
d3-iconarray - A
plug-in for aligning elements in grids
-
d3-interpolate-path
- Interpolates paths with different number of points
-
d3-jetpack - Nifty
convenience wrappers that speed up your daily work
-
d3-Labeler -
Plug-in for automatic label placement
-
d3-lasso - Tag
elements by drawing a line over or around objects
-
d3-legend - Legend
helper
-
d3-loom - Plugin to
create a “loom” visualization
-
d3-nelson-rules
- Apply nelsons rules of process control to a set of data
-
d3-peaks - Find
peaks in a noisy signal
-
d3-ring-note -
Plugin for placing circle and text annotations
-
d3-scale-cluster
- Scale that clusters data into discrete groups
-
d3-sparql - Utility
for accessing data from SPARQL Endpoints
-
d3-slider - jQuery
UI inspired slider
-
d3-starterkit -
Helper functions simplifying common and verbose d3 patterns
-
d3-template -
Plugin to create and render templates using D3’s data binding mechanism
-
d3-tip - Tooltip helper
-
d3-tipy - Tooltip helper
-
d3-tooltip -
Arrow shaped tooltip with shadows and dynamic content
-
d3-trail - A layout
for creating better path elements
-
d3-voronoi-treemap
- Computes a treemap based on a Voronoi tesselation
-
d3-xray -
Bookmarklet that logs results of the data joins as you mouse over
-
d3.svg.circularbrush
- A brush for selecting cyclical data
-
d3.svg.ribbon - An
area interpolator
-
d3kit - A set of tools to
speed D3 related project development
-
iopctrl - Lib for
making simple user interface controls
-
kodama - Tooltip
Plugin
-
swoopyarrows
- Plugin to create swoopy arrows
-
swoopy-drag -
Artisanal label placement for d3 graphics
-
textures - SVG
patterns for data visualization
Miscellaneous
-
chess-dataviz -
Chess dataviz library
-
codeflower -
Bird’s eye view of the whole code
-
comic.js - Cartoon
style drawing. Works also for canvas, Raphael & SVG.js
-
dragit - A toolkit to
enable the manipulation of data graphics
-
d3moji - First class
emoji support
-
d3-cloud - Word
clouds
-
d3-context-menu
- Helper to create context-menus
-
d3-force-gravity
- Implement gravitational attraction (or force-field-like repulsion)
-
d3-force-reuse
- Faster force-directed graph layouts by reusing force approximations
-
d3-resume - Resume
visualizer
-
d3.sketchy -
Creates sketchy backgrounds, shapes and lines
-
d3plus-text - Smart
SVG text box with line wrapping and automatic font scaling
-
graph-scroll -
Simple scrolling events
-
jsdoc2diagram
- Create tree diagram from jsdoc
-
mermaid - Generation of
diagrams and flowcharts from text in a markdown style
-
netvis - Visualize
network communication for arbitrary protocols
-
treeviz - Create
customizable trees from json data
-
twitter-sentiment-visualisation
- A series of D3.js charts showing realtime sentiment of Twitter data
Server side
-
d3-node - Static chart
and map generation
-
Kyrix - Interactive
pan/zoom Visualizations with automatic server-side scaling support.
Code Editors
Bl.ocks.org Profiles
